<!-- 这是用户登陆页面 -->

<template>
  <div id="Login">
    <!-- 左半部分 -->
    <div class="left">
      <!-- svg图标 -->
      <img class="logoImg" src="../../assets/images/LoginLogo.png" draggable="false" alt="图片我吃了哦" >
      <h3>医路通医疗流程管理系统</h3>
      <p>一个用来管理医疗流程的后台管理系统</p>
      <!-- 切换登陆方式的两个线性按钮 -->
      <div class="buttonBox">
        <el-button type="info" link :class="{highLight:visible}" @click="visible=true">账号名密码登录</el-button>
        <el-button type="info" link :class="{highLight:!visible}" @click="visible=false">手机号短信验证码登录</el-button>
      </div>
      <!-- 使用账号密码验证码登录的表单 -->
      <el-form v-if="visible" style="width: 330px;" :model="form" :rules="rules" ref="loginForm" @submit.prevent="login">
        <el-form-item prop="username">
          <el-input type="text" v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="code" style="width: 100%;">
          <div class="ValidCodeBox">
            <el-input placeholder="请输入验证码" v-model="form.code" maxlength="4" ></el-input>
            <div class="code">
              <!-- 使用自定义的验证码组件 -->
              <ValidCode v-model="validCode" />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;" type="primary" class="login" @click="throttledLogin">登录</el-button>
        </el-form-item>
      </el-form>
      <!-- 使用手机号短信验证码登录的表单 -->
      <el-form v-else style="width: 330px;" :model="phoneForm" :rules="phoneFormRules" ref="phoneLoginForm" @submit.prevent="phoneLogin">
        <el-form-item prop="username">
          <el-input type="text" v-model="phoneForm.username" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="phoneCode">
          <div class="ValidCodeBox">
              <el-input type="password" v-model="phoneForm.phoneCode" maxlength="6"  placeholder="请输入短信验证码"></el-input>
              <el-button class="phoneCode" @click="phoneSMS">获取短信验证码</el-button>
          </div>
        </el-form-item>
        <el-form-item prop="code" style="width: 100%;">
          <div class="ValidCodeBox">
            <el-input placeholder="请输入验证码" v-model="phoneForm.code" maxlength="4" ></el-input>
            <div class="code">
              <!-- 使用自定义的验证码组件 -->
              <ValidCode v-model="validCode" />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;" type="primary" class="login" @click="throttledPhoneLogin">登录</el-button>
        </el-form-item>
      </el-form>
      <!-- 登陆页面的账号和密码 用于测试使用 上线前注掉 -->
      <!-- <p>医生账号: user1 密码: password123 只能看到统计报表、工作台、患者管理、药品信息查询</p>
      <p>药剂师账号: user2 密码: password123 只能看到统计报表、药品信息查询</p>
      <p>收费人员账号: user3 密码: password123 只能看到统计报表、收费管理</p>
      <p>管理员账号: admin 密码: 666666 都能看到</p>-->
    </div>
    <!-- 右半部分 -->
    <div class="right">
      <img src="../../assets/images/LoginBg.jpg" alt="图片让我吃了哦">
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
/*引入EL的消息提示组件*/
import {ElMessage, ElNotification} from "element-plus";
/*引入自定义的验证码组件*/
import ValidCode from "../../components/ValidCode/ValidCode.vue";
/*引入路由router*/
import { useRouter } from "vue-router";
import axios from "axios";
import {throttle} from "lodash";
const router = useRouter();
/*定义变量控制两个表单的显示隐藏*/
const visible = ref(true);
/*定义表单对象存储用户输入账号密码和验证码*/
const form = ref({
  username: '',
  password: '',
  code: ''
});
/*定义表单对象存储用户输入手机号短信验证码和随机验证码*/
const phoneForm = ref({
  phone: '',
  phoneCode: '',
  code: ''
});
/*定义变量获取组件验证码的值*/
const validCode = ref('');
/*定义普通的账号密码登陆表单的规则校验*/
const rules = ref({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
      /*修改*/
    { min: 2, max: 13, message: '长度在 2 到 13 个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 13, message: '长度在 6 到 13 个字符之间', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码，验证码不区分大小写', trigger: 'blur' },
    { min: 4, max: 4, message: '长度必须为4个字符', trigger: 'blur' }
  ]
});
/*定义手机号短信验证码登陆表单的规则校验*/
const phoneFormRules = ref({
  username: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '长度必须为11个字符', trigger: 'blur' }
  ],
  phoneCode: [
    { required: true, message: '请输入短信验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '长度必须为6个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码，验证码不区分大小写', trigger: 'blur' },
    { min: 4, max: 4, message: '长度必须为4个字符', trigger: 'blur' }
  ]
});
/*定义两个表单的引用*/
const loginForm = ref(null);
const phoneLoginForm = ref(null);
/*定义普通的账号密码登陆方法*/
/*const login = async () => {
  console.log('执行登陆方法:login')
  /!*如果是admin或者user2或者user1和123456就让他登陆成功 单纯用来测试 之后根据业务修改*!/
  loginForm.value.validate(async valid => {
    if (valid) {
      if (form.value.username === 'admin' || form.value.username === 'user2' || form.value.username === 'user1') {
        if (form.value.password === '123456') {
          ElMessage.success('登录成功');
          await router.push('/');
        } else {
          ElMessage.error('密码错误');
        }
      } else {
        ElMessage.error('账号不存在');
      }
    } else {
      return false;
    }
  });
  localStorage.setItem('username', form.value.username);
};*/
const user = ref({})
const userRole = ref([])
const login = () =>{
  if (form.value.code.toLowerCase() === validCode.value.toLowerCase()) {
    axios.get(BASE_URL+'/v1/employee/select?name='+form.value.username+'&password='+form.value.password).then((response) =>{
      if(response.data.code == 2001){
        user.value = response.data.data[0];
        localStorage.setItem('userInfo', JSON.stringify(user.value));
        axios.get(BASE_URL+'/v1/authorityList/select/'+user.value.roleId+'/'+user.value.name).then((response) =>{
          userRole.value = response.data.data;
          console.log(userRole.value);
          localStorage.setItem('moduleRouteArr', JSON.stringify(userRole.value));
          ElMessage.success('登录成功');
          localStorage.setItem('username', JSON.parse(localStorage.getItem('userInfo')).name);

          // 显示欢迎通知
          ElNotification({
            title: '欢迎回来',
            message: `${JSON.parse(localStorage.getItem('userInfo')).name}，欢迎回来！祝您工作愉快！`,
            type: 'success',
            position: 'top-right',
            offset: 50,
            duration: 3000, // 3秒后自动关闭
          });

          router.push('/');
        })
      }else {
        ElMessage.error(response.data.message)
      }
    })
  } else {
    ElMessage.error('验证码错误');
  }
}
/*定义手机号短信验证码登录的方法*/
const phoneLogin = async () => {
  /*手机号验证码登录的功能后续有能力再进行开发 所以此处暂时只给一个消息提示*/
  ElMessage.success('手机号验证码登录功能暂未开放，请使用账号密码登录，谢谢！');
};
/*定义点击发送验证码按钮的方法*/
const phoneSMS = () => {
  ElMessage.success('手机号验证码登录功能暂未开放，请使用账号密码登录，谢谢！');
};
/*创建节流版本的登陆方法*/
const throttledLogin = throttle(login, 300);
const throttledPhoneLogin = throttle(phoneLogin, 300);
/*页面一进来就执行*/
onMounted(()=>{
  console.log('♥用户登录页面加载完毕');
})
</script>


<style scoped>
/* 引入css样式 */
@import url("LoginView.css");
</style>
